<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="css/buttons.css">
	<title></title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>

	<div class="container">
		<!-- 形状 -->
		<div class="row mt-5">
			<div class="col">
				<button class="button">默认形状</button>
				<button class="button button-rounded">长形圆角</button>
				<button class="button button-pill">胶囊</button>
				<button class="button button-square">方形</button>
				<button class="button button-box">圆角</button> <!-- 方形圆角 -->
				<button class="button button-circle">圆形</button>
			</div>
		</div>

		<!-- 微小尺寸，默认颜色(灰色) -->
		<div class="row mt-5">
			<div class="col">
				<button class="button button-tiny">Go</button>
				<button class="button button-tiny button-rounded">Go</button>
				<button class="button button-tiny button-pill">Go</button>
				<button class="button button-tiny button-square">Go</button>
				<button class="button button-tiny button-box">Go</button>
				<button class="button button-tiny button-circle">Go</button>
			</div>
		</div>

		<!-- 小尺寸，蓝色背景 -->
		<div class="row">
			<div class="col">
				<button class="button button-small button-primary">Go</button>
				<button class="button button-small button-primary button-rounded">Go</button>
				<button class="button button-small button-primary button-pill">Go</button>
				<button class="button button-small button-primary button-square">Go</button>
				<button class="button button-small button-primary button-box">Go</button>
				<button class="button button-small button-primary button-circle">Go</button>
			</div>
		</div>

		<!-- 正常尺寸，绿色背景 -->
		<div class="row">
			<div class="col">
				<button class="button button-action">Go</button>
				<button class="button button-action button-rounded">Go</button>
				<button class="button button-action button-pill">Go</button>
				<button class="button button-action button-square">Go</button>
				<button class="button button-action button-box">Go</button>
				<button class="button button-action button-circle">Go</button>
			</div>
		</div>

		<!-- 大尺寸，黄色背景 -->
		<div class="row">
			<div class="col">
				<button class="button button-large button-highlight">Go</button>
				<button class="button button-large button-highlight button-rounded">Go</button>
				<button class="button button-large button-highlight button-pill">Go</button>
				<button class="button button-large button-highlight button-square">Go</button>
				<button class="button button-large button-highlight button-box">Go</button>
				<button class="button button-large button-highlight button-circle">Go</button>
			</div>
		</div>

		<!-- 特大尺寸，红色背景 -->
		<div class="row">
			<div class="col">
				<button class="button button-jumbo button-caution">Go</button>
				<button class="button button-jumbo button-caution button-rounded">Go</button>
				<button class="button button-jumbo button-caution button-pill">Go</button>
				<button class="button button-jumbo button-caution button-square">Go</button>
				<button class="button button-jumbo button-caution button-box">Go</button>
				<button class="button button-jumbo button-caution button-circle">Go</button>
			</div>
		</div>

		<!-- 巨大尺寸，深蓝色背景 -->
		<div class="row">
			<div class="col">
				<button class="button button-giant button-royal">Go</button>
				<button class="button button-giant button-royal button-rounded">Go</button>
				<button class="button button-giant button-royal button-pill">Go</button>
				<button class="button button-giant button-royal button-square">Go</button>
				<button class="button button-giant button-royal button-box">Go</button>
				<button class="button button-giant button-royal button-circle">Go</button>
			</div>
		</div>

		<!-- 边框按钮 -->
		<div class="row mt-5">
			<div class="col">
				<button class="button button-circle button-large button-border button-primary">Go</button>
				<button class="button button-box button-large button-border button-primary">Go</button>
			</div>
		</div>

		<!-- 3D 按钮 -->
		<div class="row mt-5">
			<div class="col">
				<button class="button button-3d">Go</button>
				<button class="button button-3d button-primary button-rounded">Go</button>
				<button class="button button-3d button-action button-pill">Go</button>
				<button class="button button-3d button-highlight button-square">Go</button>
				<button class="button button-3d button-caution button-box">Go</button>
				<button class="button button-3d button-royal button-circle">Go</button>
			</div>
		</div>

		<!-- 突起样式的按钮 -->
		<div class="row mt-5">
			<div class="col">
				<button class="button button-raised">Go</button>
				<button class="button button-raised button-primary button-rounded">Go</button>
				<button class="button button-raised button-action button-pill">Go</button>
				<button class="button button-raised button-highlight button-square">Go</button>
				<button class="button button-raised button-caution button-box">Go</button>
				<button class="button button-raised button-royal button-circle">Go</button>
			</div>
		</div>

		<!-- 长阴影 -->
		<div class="row mt-5">
			<div class="col">
				<button class="button button-longshadow-right">Go</button>
				<button class="button button-longshadow-right button-primary button-rounded">Go</button>
				<button class="button button-longshadow-right button-action button-pill">Go</button>
				<button class="button button-longshadow-right button-highlight button-square">Go</button>
				<button class="button button-longshadow-right button-caution button-box">Go</button>
				<button class="button button-longshadow-right button-royal button-circle">Go</button>
			</div>
		</div>

		<!-- 光晕效果 -->
		<div class="row mt-5">
			<div class="col">
				<button class="button button-glow">Go</button>
				<button class="button button-glow button-primary button-rounded">Go</button>
				<button class="button button-glow button-action button-pill">Go</button>
				<button class="button button-glow button-highlight button-square">Go</button>
				<button class="button button-glow button-caution button-box">Go</button>
				<button class="button button-glow button-royal button-circle">Go</button>
			</div>
		</div>

		<!-- 带下拉菜单的按钮 -->
		<div class="row mt-5">
			<div class="col">
				<div class="button-dropdown" data-buttons='dropdown'>
					<button class="button button-rounded button-royal button-giant">城市</button>
					<ul class="button-dropdown-list">
						<li><a href="#">北京</a></li>
						<li><a href="#">上海</a></li>
						<li class="button-dropdown-divider"><a href="#">广州</a></li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 按钮组 -->
		<div class="row mt-5">
			<div class="col">
				<div class="button-group">
					<button class="button button-primary">首页</button>
					<button class="button button-primary">关于我们</button>
					<button class="button button-primary">联系我们</button>
					<div class="button-dropdown" data-buttons='dropdown'>
						<button class="button button-primary">城市</button>
						<ul class="button-dropdown-list">
							<li><a href="#">北京</a></li>
							<li><a href="#">上海</a></li>
							<li class="button-dropdown-divider"><a href="#">广州</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<div class="button-group">
					<button class="button button-pill button-action">首页</button>
					<button class="button button-pill button-action">关于我们</button>
					<button class="button button-pill button-action">联系我们</button>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<div class="button-group">
					<button class="button button-raised button-highlight">首页</button>
					<button class="button button-raised button-highlight">关于我们</button>
					<button class="button button-raised button-highlight">联系我们</button>
				</div>
			</div>
		</div>

		<!-- 堆叠按钮 -->
		<div class="row mt-5">
			<div class="col">
				<a href="#" class="button button-block mt-1 button-large button-rounded">Go</a>
				<a href="#" class="button button-block mt-1 button-large button-rounded button-primary">Go</a>
				<a href="#" class="button button-block mt-1 button-large button-rounded button-action">Go</a>
				<a href="#" class="button button-block mt-1 button-large button-rounded button-highlight">Go</a>
				<a href="#" class="button button-block mt-1 button-large button-rounded button-caution">Go</a>
				<a href="#" class="button button-block mt-1 button-large button-rounded button-royal">Go</a>
			</div>
		</div>

		<!-- 额外的环绕效果 -->
		<div class="row mt-5">
			<div class="col">
				<span class="button-wrap">
					<button class="button button-circle m-2"></button>
				</span>
				<span class="button-wrap">
					<button class="button button-circle m-2 button-primary"></button>
				</span>
				<span class="button-wrap">
					<button class="button button-pill m-2"></button>
				</span>
				<span class="button-wrap">
					<button class="button button-pill m-2 button-primary"></button>
				</span>
			</div>
		</div>

		<!-- 表单按钮 -->
		<div class="row mt-5">
			<div class="col">
				<input type="submit" class="button button-pill button-primary" value="Go">
				<button type="submit" class="button button-pill button-primary">Go</button>
				<a href="#" class="button button-pill button-primary">Go</a>

				<input type="submit" disabled class="button button-pill button-primary" value="Go">
				<button type="submit" disabled class="button button-pill button-primary">Go</button>
				<a href="#" class="button button-pill button-primary disabled">Go</a>
			</div>
		</div>

		<!-- 文字样式 -->
		<div class="row mt-5">
			<div class="col">
				<a href="#" class="button button-primary button-uppercase">uppercase</a>	<!-- 转大写 -->
				<a href="#" class="button button-primary button-lowercase">LOWERCASE</a>	<!-- 转小写 -->
				<a href="#" class="button button-primary button-capitalize">capitalize</a>	<!-- 首字母转大小 -->
				<a href="#" class="button button-primary button-small-caps">small caps</a>	<!-- 转大写，但字号会变小 -->
			</div>
		</div>


	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="js/buttons.js"></script>
</body>

</html>
